
<template>
  <Tooltip :placement="placement" :transfer="transfer">
    <div class="tool-tip-txt">{{txt}}</div>
    <div slot="content" v-if="typeof content === `string` && content">
      <p>{{content}}</p>
    </div>
    <div slot="content" v-else-if="Array.isArray(content) && content">
      <p v-for="(o, i) of content" :key="i" v-text="o"></p>
    </div>
  </Tooltip>
</template>

<script>
/**
 * 混合tooltip或者直接用具名插槽render
 * h(tooltip, { props: {txt, content} })
 * 或者
 * h('Tooltip', {
      props: { placement: 'bottom', transfer: true },
      scopedSlots: { // 插槽名
        content: () => Array.isArray(content) ? content.map(o => h('div', o)) : content
      }
    }, txt)
  */
import { Tooltip } from 'view-design'
export default {
  components: { Tooltip },
  data () {
    return {}
  },
  props: {
    placement: {
      type: String,
      default: 'top'
    },
    transfer: {
      type: Boolean,
      default: true
    },
    txt: {
      type: [String, Array],
      default: 'txt'
    },
    content: {
      type: [String, Array],
      default: 'content'
    }
  }
}
</script>

<style scoped>
.tool-tip-txt {
  cursor: pointer;
}
</style>
